1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import { Column, Grid, Icon, Label, Row } from '@umami/react-zen';
import type { ReactNode } from 'react';
import { DateDistance } from '@/components/common/DateDistance';
import { TypeIcon } from '@/components/common/TypeIcon';
import { useFormat, useLocale, useMessages, useRegionNames } from '@/components/hooks';
import { Calendar, KeyRound, Landmark, MapPin } from '@/components/icons';
export function SessionInfo({ data }) {
const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat();
const { getRegionName } = useRegionNames(locale);
return (
<Grid columns="repeat(auto-fit, minmax(200px, 1fr)" gap>
<Info label={formatMessage(labels.distinctId)} icon={<KeyRound />}>
{data?.distinctId}
</Info>
<Info label={formatMessage(labels.lastSeen)} icon={<Calendar />}>
<DateDistance date={new Date(data.lastAt)} />
</Info>
<Info label={formatMessage(labels.firstSeen)} icon={<Calendar />}>
<DateDistance date={new Date(data.firstAt)} />
</Info>
<Info
label={formatMessage(labels.country)}
icon={<TypeIcon type="country" value={data?.country} />}
>
{formatValue(data?.country, 'country')}
</Info>
<Info label={formatMessage(labels.region)} icon={<MapPin />}>
{getRegionName(data?.region)}
</Info>
<Info label={formatMessage(labels.city)} icon={<Landmark />}>
{data?.city}
</Info>
<Info
label={formatMessage(labels.browser)}
icon={<TypeIcon type="browser" value={data?.browser} />}
>
{formatValue(data?.browser, 'browser')}
</Info>
<Info
label={formatMessage(labels.os)}
icon={<TypeIcon type="os" value={data?.os?.toLowerCase()?.replaceAll(/\W/g, '-')} />}
>
{formatValue(data?.os, 'os')}
</Info>
<Info
label={formatMessage(labels.device)}
icon={<TypeIcon type="device" value={data?.device} />}
>
{formatValue(data?.device, 'device')}
</Info>
</Grid>
);
}
const Info = ({
label,
icon,
children,
}: {
label: string;
icon?: ReactNode;
children: ReactNode;
}) => {
return (
<Column>
<Label>{label}</Label>
<Row alignItems="center" gap>
{icon && <Icon>{icon}</Icon>}
{children || '—'}
</Row>
</Column>
);
};
|